<div nz-row [nzGutter]="16">
  <div nz-col [nzSpan]="12" class="mb-2">
    <nz-card [nzLoading]="loading" class="h-100">
      <ul *ngIf="model?.stats" class="list-unstyled mt-3 ps-4">
        <li class="d-flex mb-3 align-items-center">
          <span nz-icon class="stat-icon me-2" [nzType]="'file-excel'" [nzTheme]="'outline'"
                style="color: #ffc63b; font-size: 24px;"></span>
          {{model.stats?.projects || 0}} 项目
        </li>
        <li class="d-flex mb-3 align-items-center">
          <span nz-icon class="stat-icon me-2" [nzType]="'exclamation-circle'" [nzTheme]="'outline'"
                style="color: #75c997; font-size: 24px;"></span>
          {{model.stats?.completed || 0}} 已完成任务
        </li>
        <li class="d-flex mb-3 align-items-center">
          <span nz-icon class="stat-icon me-2" [nzType]="'clock-circle'" [nzTheme]="'outline'"
                style="color: #7cb5ec; font-size: 24px;"></span>
          {{model.stats?.ongoing || 0}} 进行中任务
        </li>
        <li class="d-flex mb-3 align-items-center">
          <span nz-icon class="stat-icon me-2" [nzType]="'clock-circle'" [nzTheme]="'outline'"
                style="color: #eb6363; font-size: 24px;"></span>
          {{model.stats?.overdue || 0}} 逾期任务
        </li>
        <li class="d-flex align-items-center">
          <span nz-icon class="stat-icon me-2" [nzType]="'clock-circle'" [nzTheme]="'outline'"
                style="color: #75c997; font-size: 24px;"></span>
          {{model.stats?.total_logged || 0}} 已记录工时
        </li>
      </ul>
    </nz-card>
  </div>
  <div nz-col [nzSpan]="12" class="mb-2">
    <nz-card [nzTitle]="dueDateCardTitle">
      <ng-template #dueDateCardTitle>
        <div class="d-flex align-items-center">
          <h4 class="mb-0">按项目分类的任务</h4>
        </div>
      </ng-template>
      <div class="card-content">
        <ng-container *ngIf="isProjectsChartEmpty">
          <div class="pt-4 pb-5 text-center">
            <div class="no-data-img-holder mx-auto mb-3">
              <img src="/assets/images/empty-box.webp" class="img-fluid" alt="">
            </div>
            <span nz-typography class="no-data-text">没有任务显示。</span>
          </div>
        </ng-container>
        <div *ngIf="!loading && !isProjectsChartEmpty" class="d-flex">
          <div *ngIf="model.by_project && model.by_project.chart.length" class="position-relative"
               style="max-width: 200px">
            <canvas baseChart
                    [width]="185"
                    [height]="185"
                    [data]="projectsChartData"
                    [options]="chartOptions"
                    [legend]="false"
                    [type]="'doughnut'">
            </canvas>
          </div>
          <div class="chart-details ms-3">
            <ul class="list-unstyled" *ngIf="model.by_project">
              <li class="mb-1 chart-label">
                <nz-badge [nzColor]="'#333333'" [nzText]="'全部' | withCount: model.by_project.total"></nz-badge>
              </li>
              <li class="mb-1 chart-label" *ngFor="let item of model.by_project.data">
                <nz-badge [nzColor]="item.color | safeString"></nz-badge>
                <span style="font-size: 13px">{{item.label | ellipsis: 30}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
  <div nz-col [nzSpan]="12" class="mb-2">
    <nz-card [nzTitle]="statusCardTitle">
      <ng-template #statusCardTitle>
        <div class="d-flex align-items-center">
          <div>
            <h4 class="mb-0">按状态分类的任务</h4>
          </div>
        </div>
      </ng-template>
      <div class="card-content">
        <ng-container *ngIf="isStatusChartEmpty">
          <div class="pt-4 pb-5 text-center">
            <div class="no-data-img-holder mx-auto mb-3">
              <img src="/assets/images/empty-box.webp" class="img-fluid" alt="">
            </div>
            <span nz-typography class="no-data-text">没有任务显示。</span>
          </div>
        </ng-container>
        <div *ngIf="!loading && !isStatusChartEmpty " class="d-flex">
          <div *ngIf="model.by_status && model.by_status.chart.length" class="position-relative"
               style="max-width: 200px">
            <canvas baseChart
                    [width]="185"
                    [height]="185"
                    [data]="statusChartData"
                    [options]="chartOptions"
                    [legend]="false"
                    [type]="'doughnut'">
            </canvas>
          </div>
          <div class="chart-details ms-3">
            <ul class="list-unstyled" style="max-height: 210px;overflow-y: auto;" *ngIf="model.by_status">
              <li class="mb-1 chart-label">
                <nz-badge [nzColor]="'#333333'" [nzText]="'全部' | withCount: model.by_status.total"></nz-badge>
              </li>
              <li class="mb-1 chart-label" *ngFor="let item of model.by_status.data">
                <nz-badge [nzColor]="item.color | safeString" [nzText]="item.label | withCount: item.count"></nz-badge>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
  <div nz-col [nzSpan]="12" class="mb-2">
    <nz-card [nzTitle]="priorityCardTitle">
      <ng-template #priorityCardTitle>
        <div class="d-flex align-items-center">
          <div>
            <h4 class="mb-0">按优先级分类的任务</h4>
          </div>
        </div>
      </ng-template>
      <div class="card-content">
        <ng-container *ngIf="isPriorityChartEmpty">
          <div class="pt-4 pb-5 text-center">
            <div class="no-data-img-holder mx-auto mb-3">
              <img src="/assets/images/empty-box.webp" class="img-fluid" alt="">
            </div>
            <span nz-typography class="no-data-text">没有任务显示。</span>
          </div>
        </ng-container>
        <div *ngIf="!loading && !isPriorityChartEmpty" class="d-flex">
          <div *ngIf="model.by_priority && model.by_priority.chart.length" class="position-relative"
               style="max-width: 200px">
            <canvas baseChart
                    [width]="185"
                    [height]="185"
                    [data]="prioritiesChartData"
                    [options]="chartOptions"
                    [legend]="false"
                    [type]="'doughnut'">
            </canvas>
          </div>
          <div class="chart-details ms-3">
            <ul class="list-unstyled" *ngIf="model.by_priority">
              <li class="mb-1 chart-label">
                <nz-badge [nzColor]="'#333333'" [nzText]="'全部' | withCount: model.by_priority.total"></nz-badge>
              </li>
              <li class="mb-1 chart-label" *ngFor="let item of model.by_priority.data">
                <nz-badge [nzColor]="item.color | safeString" [nzText]="item.label | withCount: item.count"></nz-badge>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nz-card>
  </div>
</div>
